<template>
  <div class="classify">
   
    <van-sidebar class="left" v-model="activeKey">
      <van-sidebar-item  @click="dian(index)"  :title="item.title" v-for="(item,index) in data" :key="item.id" ></van-sidebar-item>
    </van-sidebar>
    <div class="right">
        <div v-for="(item, index) in childrenData"  :key="index">
          <img :src="item.img" alt="">
          {{item.title}}
        </div>
    </div>
  </div>
</template>
<script>
import {mapState,mapActions} from "vuex"
export default {
  data() {
    return {
      activeKey: 0,

    };
  },
  computed: {
     ...mapState("classify",["data","childrenData","ind"])
  },
  mounted() {
    this.getlist()
  },
  methods: {
   ...mapActions("classify",["getlist"]),
   dian(index){
   
   this.$store.commit('classify/setchildren',index )
   }
  },
};
</script>
<style scoped>
.classify{
    width: 100%;
    height: 100%;
    display: flex;
}
.left{
    width: 100px;
}
.right{
    flex: 1;
}
</style>